<template>
  <div class="oll">
    <div v-if="this.$route.path == '/me'">
      <div class="head">
        <van-nav-bar>
          <template #right>
            <span @click="goLogin" v-if="!islode" style="color: aliceblue"
              >登录</span
            >
            <div v-if="islode">
              <span style="color: aliceblue">欢迎您</span>
            </div>
          </template>
        </van-nav-bar>
        <!-- <div class="mid"></div>  -->
        <div class="tx">
          <van-image
            style="margin-top: 2rem"
            round
            width="5rem"
            height="5rem"
            src="/img/toux_01.jpg"
          /><br /><br />
          <span v-if="!islode">未登录</span>
          <div v-if="islode" class="name">
            <span
              v-for="item in userinfo"
              :key="item.id"
              style="color: aliceblue"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </div>
      <div class="perGrid">
        <van-grid :gutter="0">
          <van-grid-item icon="manager-o" text="个人信息" @click="perDetails" />
          <van-grid-item icon="coupon-o" text="我的订单" @click="myOrder" />
          <van-grid-item
            icon="browsing-history-o"
            text="想看"
            @click="wannaSee"
          />
          <van-grid-item icon="eye-o" text="看过" @click="havaWatched" />
        </van-grid>
      </div>
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '40%' }"
      >
        <div class="myPopup">
          <span>登录后才可查看该信息~</span><br />
          <div style="margin-top: 1rem">
            <button @click="goLogin">去登录</button>
          </div>
        </div>
      </van-popup>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import router from "@/router";
export default {
  data() {
    return {
      active: 2,
      mypath: "",
      userinfo: [],
      islode: 0,
      show: false,
    };
  },
  methods: {
    goLogin() {
      // this.show = true;
      this.$router.push("/Login");
    },
    perDetails() {
      if (this.islode != 1) {
        this.show = true;
      } else {
        this.$router.push("/me/perdetails");
        console.log(this.$route.path);
      }
    },
    myOrder() {
      if (this.islode != 1) {
        this.show = true;
      } else {
        this.$router.push("/me/myorder");
      }
    },
    wannaSee() {
      if (this.islode != 1) {
        this.show = true;
      } else {
        this.$router.push("/me/wannasee");
      }
    },
    havaWatched() {
      if (this.islode != 1) {
        this.show = true;
      } else {
        this.$router.push("/me/watched");
      }
    },
    loadInfo() {
      if (this.$store.state.loginCode) {
        this.axios
          .get(`/user/selectUserInfo?id=${this.$store.state.userId}`)
          .then((res) => {
            console.log(res);
            this.islode = 1;
            this.userinfo = res.data;
            console.log("用户信息" + this.userinfo);
          });
      }
    },
  },
  mounted() {
    this.loadInfo();
  },
};
</script scope>

<style scoped>
/* .body {
  background-color: #909090;
} */
/* [class*=van-hairline]::after{
  background-color:;
} */
[class*="van-hairline"]::after {
  border: 0px;
}
.van-nav-bar__right {
  /* color: rgb(49, 49, 49); */
}
.van-grid {
  background-color: #ddd8d8;
}
.van-nav-bar {
  background-color: #09203f ;
}
.tx {
  text-align: center;
  /* background-image: url(perBg_01.jpg); */
  background: linear-gradient(to bottom, #09203f  0%, #537895 100%);
  height: 88%;
  /* border: 1px solid aliceblue; */
}
.tx > span {
  font-weight: bold;
  color: aliceblue;
}
.name {
  font-weight: bold;
}
.head {
  width: 100%;
  height: 15rem;
}
.head > span {
  /* color: aliceblue; */
  margin: 1rem;
  font-size: 0.5ch;
}
.perGrid {
  box-shadow: 5px 5px 10px #909090;
  margin-top: 1rem;
}
.myPopup {
  height: 100%;
  /* background-color: rebeccapurple; */
  text-align: center;
}
.myPopup span {
  line-height: 7rem;
  font-size: 1.2rem;
}
.myPopup button {
  width: 50%;
  padding: 0.7rem;
  border-radius: 35px;
  background-color: rgb(247, 54, 54);
  color: aliceblue;
  border: 1px solid red;
}
</style>
